<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="node_modules/lib-flexible/flexible.js"></script>
    <link href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="./scss/index.css">
</head>
<body>
<div class="container">
    <div class="container--header">
        <div class="container--header_left container--head_item"><img src="./img/icon/x.png" alt="" class="safe_padding_left"></div>
        <div class="container--header_center container--head_item"><span>登录</span></div>
        <div class="container--header_right container--head_item"><img src="./img/icon/more.png" alt="" class="safe_padding_right"></div>
    </div>
    <div class="container--content">
        <div class="mask">
            <div class="inner">
                <p class="info_title info_padding">验证码登录</p>
                <input type="tel" class="tel" id="tel" placeholder="请输入登录手机号">
                <input type="tel" pattern="[0-9]*"  ng-trim="false"  autocomplete="off" autocorrect="off" maxlength="6" class="code" placeholder="输入6位验证码" id="validCode">
                <button class="CodeBtn" id="getCode">获取验证码</button>
                <span class="submit" id="submit">登录</span>
        </div>
        </div>
    </div>
    <div class="container--bottom">
        <div class="container--bottom_left container--bottom_item"><img src="./img/icon/left.png" alt="" class="padding_right"></div>
        <div class="container--bottom_right container--bottom_item"><img src="./img/icon/right.png" alt="" class="padding_left"></div>
    </div>
</div>
<!--<input id="tel" type="tel" placeholder="手机号">-->
<!--<button id="getCode">获取验证码</button><br>-->
<!--<input id="validCode" type="text" placeholder="验证码">-->
<!--<button id="submit">提交</button>-->
</body>
<script>
    window.onload = function () {

        var telIpt = document.getElementById('tel');
        var mask =document.getElementsByClassName('mask')[0];
        var telReg = /^1[35789]\d{9}$/;
        var btnflag=false;
        var getCodeBtn = document.getElementById('getCode');
        var validCode = document.getElementById('validCode');
        var submitBtn = document.getElementById('submit');
        telIpt.oninput = function(){
            if(telReg.test(telIpt.value)){
                getCodeBtn.className='CodeBtn_sure';
                btnflag=true;
            }else{
                getCodeBtn.className='CodeBtn';
                btnflag=false;
            }
        };
        getCodeBtn.onclick = function () {
             var val = telIpt.value;
             var num = 60;
            // var telReg = /^1[35789]\d{9}$/;
                if(telReg.test(val)){
                    $.ajax({
                        method:'get',
                        url:'http://localhost:8080/validCodeMsg',
                        data: {
                            phoneNumber: val
                        },
                        success: function (data) {
                            console.log(data);
                        },
                        fail: function (error) {
                            console.log(error);
                        }
                    });
                   var timer =setInterval(function(){
                        num--;
                        getCodeBtn.disabled=true;
                        getCodeBtn.innerHTML= num+'秒后重新获取';
                        getCodeBtn.style.background= '#fff';
                        getCodeBtn.style.color='#555';
                        if(num===0){
                            getCodeBtn.disabled='';
                            getCodeBtn.style.background='#06bf04';
                            getCodeBtn.style.color='#f1f1f1';
                            getCodeBtn.innerHTML='获取验证码';
                            clearInterval(timer);
                        }
                    },1000)
                }else{
                    getCodeBtn.style.background=rgba(0, 0, 0, 0.3)
                }

        };
        submitBtn.onclick=function() {
            $.ajax({
                url:'http://localhost:8080/valid',
                method:'get',
                data:{
                    code:validCode.value
                },
                success:function(data){
                    console.log(data);
                    // if(telReg.test(telIpt.value)&&submitBtn.vlaue!==''){
                    //     mask.style.display='none';
                    // }else{
                    //     mask.style.display='block';
                    // }
                    if(data.code===1){
                        mask.style.display='none';
                    }else{
                        mask.style.display='block';
                    }
                },
                fail:function(error){
                    console.log(error);
                }
            })
        }
    }
</script>
</html>
